<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <!--设置ico图标-->
    <link rel="icon" href="/img/icon/favicon.ico" type="image/x-icon" />
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/js/elementUI/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="/js/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="/js/elementUI/index.js"></script>
    <!-- 引入axios 的js-->
    <script src="/js/axios/axios.js"></script>
    <style type="text/css">
        .homepage-hero-module,
        .video-container {
            position: relative;
            height: 100vh;
            overflow: hidden;
        }
        .video-container .poster img{
            z-index: 0;
            position: absolute;
        }
        .video-container .filter {
            z-index: 1;
            position: absolute;
            width: 100%;
        }
    </style>
</head>
<body style="background-color: #dbe9fa">
<div id="app">
    <div class="homepage-hero-module">
        <div class="video-container">
            <div :style="fixStyle" class="filter">
                <div style="width: 400px; margin: 100px auto">
                    <div style="font-size: 30px; text-align: center; padding: 30px 0; color: #333">欢迎登录</div>
                    <el-form ref="form" :model="form" size="normal" :rules="rules">
                        <el-form-item prop="username">
                            <el-input prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="width: 100%" type="primary" @click="login">登 录</el-button>
                        </el-form-item>
                        <el-form-item><el-button type="text" @click="$router.push('/register')">前往注册 >> </el-button></el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                fixStyle: '',
                form: {role: 1},
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                },
            }
        },
        mounted() {
            sessionStorage.removeItem("user")

            window.onresize = () => {
                const windowWidth = document.body.clientWidth
                const windowHeight = document.body.clientHeight
                const windowAspectRatio = windowHeight / windowWidth
                let videoWidth
                let videoHeight
                if (windowAspectRatio < 0.5625) {
                    videoWidth = windowWidth
                    videoHeight = videoWidth * 0.5625
                    this.fixStyle = {
                        height: windowWidth * 0.5625 + 'px',
                        width: windowWidth + 'px',
                        'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
                        'margin-left': 'initial'
                    }
                } else {
                    videoHeight = windowHeight
                    videoWidth = videoHeight / 0.5625
                    this.fixStyle = {
                        height: windowHeight + 'px',
                        width: windowHeight / 0.5625 + 'px',
                        'margin-left': (windowWidth - videoWidth) / 2 + 'px',
                        'margin-bottom': 'initial'
                    }
                }
            }
            window.onresize()
        },
        methods:{
            login () {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        request.post("/user/login", this.form).then(res => {
                            if (res.code === '0') {
                                this.$message({
                                    type: "success",
                                    message: "登录成功"
                                })
                                sessionStorage.setItem("user", JSON.stringify(res.data))  // 缓存用户信息

                                // 登录成功的时候更新当前路由
                                activeRouter()
                                this.$router.push("/")  //登录成功之后进行页面的跳转，跳转到主页

                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.msg
                                })
                            }
                        })
                    }
                })
            }
        }
    })
</script>
</body>
</html>
